<template>
    <!-- 管理仪表板容器 -->
    <div class="admin-dashboard">
        <el-row :gutter="20" class="outer-row">
            <!-- 左侧列 -->
            <el-col :span="12" class="leftlcol">
                <!-- 内层行 - 左侧上 -->
                <el-row class="inner-row">
                    <el-col :span="24">
                        <el-card class="dashboard-card">
                            <div class="card-content">


                                <!-- 概要信息展示 -->
                                <el-descriptions title="管理员">


                                    <el-descriptions-item label="登录时间:"><br>{{ loginTime }}</el-descriptions-item>


                                </el-descriptions>
                                <!-- <h3>个人信息</h3> -->

                                <!-- <p>管理员</p> -->

                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <!-- 内层行 - 左侧下 -->
                <el-row class="inner-row">
                    <el-col :span="24">
                        <el-card class="dashboard-card">
                            <div class="card-content">
                                <h3>颐养中心介绍</h3>
                                <p class="long-text">

                                    颐养中心旨在为老年人提供一个安全、舒适、充满关爱的生活环境,

                                    我们的颐养中心坐落于风景优美的郊区，周围环境宁静，空气清新，远离城市的喧嚣。<br>
                                <p text-index:2ch>中心内设有宽敞的居住空间，每个房间都配备了现代化的生活设施，确保每位入住的长者都能享受到便捷的生活服务。

                                    除了基本的生活照料，我们提供全面的医疗护理服务，包括定期的健康检查、疾病预防和治疗。</p>

                                <p text-index:2ch>我们深知，每一位长者都是家庭的宝贵财富，颐养中心致力于成为他们晚年生活的温馨港湾，让他们在享受天伦之乐的同时，也能体验到尊严和尊重。</p>
                                </p>
                                <el-descriptions title="关于我们" direction="vertical" :column="4" border>
                                    <el-descriptions-item label="名称">东软颐养中心</el-descriptions-item>
                                    <el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
                                    <el-descriptions-item label="省份" :span="2">河北</el-descriptions-item>
                                    <el-descriptions-item label="单位类型">
                                        <el-tag size="small">公益</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="Address">
                                        中国，XX省，XX市，XX大街，XX号
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>

            <!-- 右侧列 -->
            <el-col :span="12">
                <!-- 内层行 - 右侧 -->
                <el-row class="inner-row">
                    <el-col :span="24">
                        <el-card class="dashboard-card">
                            <h3 class="short-text">院内景观</h3>
                            <div class="card-content">
                                <div class="demo-image__placeholder">
                                    <div>


                                        <span class="short-text">后院景观<br></span>
                                    </div>

                                    <div class="block">
                                        <el-image :src="src1" />
                                    </div>
                                </div>


                                <!-- 间隔 -->
                                <div class="spacer"></div>

                                <div class="demo-image__placeholder">
                                    <div>
                                        <span class="short-text">前院景观<br></span>
                                    </div>

                                    <div class="block">

                                        <el-image :src="src2">
                                            <template #placeholder>
                                                <div class="image-slot">Loading<span class="dot">...</span></div>
                                            </template>
                                        </el-image>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>


            </el-col>

        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import { ref, onMounted } from 'vue';

// 使用 ref 创建一个响应式变量来存储格式化后的登录时间
const loginTime = ref(new Date());
const loginTimeFormatted = ref(loginTime.value.toLocaleString());

onMounted(() => {
    loginTime.value = new Date();
    loginTimeFormatted.value = loginTime.value.toLocaleString();
});

//设置图片地址
const src1 =
    'https://ts1.cn.mm.bing.net/th/id/R-C.81d46331789fb08f77a628ab080928e8?rik=k3EaRZLf4TRG3A&riu=http%3a%2f%2flabang-img.oss-cn-shenzhen.aliyuncs.com%2fuploads%2f20220615%2faf6d075dacc4c8b5d1cfc9fb9c461778.jpg!details&ehk=dOE9t33FsOzJ0NME5eryHm6sZAkzXOdY7HVKGuPG6q4%3d&risl=&pid=ImgRaw&r=0'
const src2 =
    'https://ts1.cn.mm.bing.net/th/id/R-C.1a106350f3d042ad458ef7e7c9d16b24?rik=10ocKJYG2yOGPA&riu=http%3a%2f%2fwww.ycwsyl.cn%2frepository%2fimage%2fNK1U1HYXSKKRZottDYvDgA.jpg&ehk=scLbptbbObIJlw7Gnftqnm9B3o1THAqlALuMlAY5CS8%3d&risl=&pid=ImgRaw&r=0'

// 组件挂载时设置登录时间
const state = reactive({
    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    logintime: new Date().toISOString()

})

const { circleUrl } = toRefs(state) // 只保留了circleUrl





</script>

<style scoped>

/* 右侧间隔大小 */
.spacer {
    height: 43px;
}

.admin-dashboard {
    padding: 20px;
    /* 减少内边距 */
    background-color: #f5f5f5;
}

.long-text {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    text-indent: 2ch;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    /* 首选字体是 Roboto，如果不可用则使用 Helvetica，最后是通用的 sans-serif */
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

.short-text {
    padding-left: 10px;
    padding-top: 20px;

    font-family: 'Roboto', 'Helvetica', sans-serif;
    /* 首选字体是 Roboto，如果不可用则使用 Helvetica，最后是通用的 sans-serif */
    line-height: 1.6;
    font-size: 16px;
    color: #333;

}

.outer-row {
    margin-bottom: 20px;
}

.inner-row {
    margin-bottom: 20px;
}

.dashboard-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    /* 增加阴影效果 */
}

/* 为最后一个内层行的卡片移除底部间隔 */
.outer-row .inner-row:last-child .dashboard-card {
    margin-bottom: 0;
}

.card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    /* 给卡片内容添加内边距 */
}

.sub-title {
    font-size: 14px;
    /* 子标题的字体大小 */

    color: #666;
    /* 子标题的颜色 */
}

.block {
    float: right;
    /* 头像居中显示 */
    padding: 10px
}

.el-descriptions {
    margin-top: 20px;
}
</style>
